<script setup lang="ts">

import { ref, computed } from 'vue'
import type { Ref, ComputedRef } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
// 手机号
const tel: Ref<string> = ref('')
// 密码
const password: Ref<string> = ref('')
// 滑块
// const checked: Ref<boolean> = ref(false)

// 验证手机号是否合法
let flag: ComputedRef<boolean> = computed(() => {
  if (/^(?:(?:\+|00)86)?1\d{10}$/.test(tel.value) && password.value.length != 0) {
    return false
  } else {
    return true
  }
})

// 验证密码长度
let checked: ComputedRef<boolean> = computed(() => {
  if (password.value.length !== 0) {
    return true
  } else {
    return false
  }
})

// 登录
function loginClick() {

  showToast('登录成功！')
  router.push('/home')
}

function registerClick() {
  router.push('/login/register')
}

function passwordClick() {
  router.push('/login/password')
}

</script>

<template>
  <div class="bigbox">
    <header class="header">登录</header>

    <div class="login">
      <van-form>
        <van-cell-group inset>
          <van-field left-icon="user-circle-o" v-model="tel" name="手机号" clearable placeholder="请输入手机号码"
            :rules="[{ required: true, message: '请填写手机号' }]" />
          <van-field left-icon="goods-collect-o" v-model="password" type="password" clearable name="密码" placeholder="输入密码"
            :rules="[{ required: true, message: '请填写密码' }]">
            <template #right-icon>
              <van-switch v-model="checked" size="14px" />
            </template>
          </van-field>
        </van-cell-group>
        <p class="login-p">
          <span @click="registerClick">注册</span>
          <span @click="passwordClick">忘记密码？</span>
        </p>
        <div style="margin: 16px;">
          <van-button :disabled="flag" round block type="primary" native-type="submit" @click="loginClick">提交</van-button>
        </div>
      </van-form>


    </div>

    <van-divider dashed>其他方式登录</van-divider>
    <div class="icon">
      <van-icon class="wechat" name="wechat" size="30" color="white" />
      <van-icon class="qq" name="qq" size="30" color="blue" />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bigbox {
  height: 100%;
  background-image: url(../../assets/login.jpg);
}

.header {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

.login {
  margin-top: 50px;
}



.van-cell-group {
  margin: 15px 0;
  width: 90%;
  margin-left: 5%;
}

.van-button {
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
}

.login-p {
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  font-size: 14px;
  color: rgb(47, 42, 42);
}

.van-divider {
  margin-top: 50px;
  color: white;
  font-size: 14px;
}

.icon {
  display: flex;
  justify-content: center;
}

.wechat {
  width: 40px;
  height: 40px;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  margin-right: 20px;
}

.qq {
  width: 40px;
  height: 40px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}
</style>